<template>
	<view>
		<view class="header">
			<view class="leftimg">
				<image :src="getImgUrl('/img/missimg/xiangzuojiantou.svg')"
					style="width: 56rpx;height: 30rpx;filter: brightness(160%);" @click="Black"></image>
			</view>
			<view class="right_font">
				许愿池
			</view>
			<view class="">

			</view>
		</view>
		<view class="centertext" v-if="ismodal">
			<image :src="ywimg" mode="" style="width: 500rpx;height: 56rpx;position: absolute; top: 270rpx;"></image>
			<!-- <textarea class="textarea" maxlength='90' @input="descInput" v-model="txt"
				placeholder="请输入您的愿望…"></textarea>
			<radio-group name="" class="radio" @change="radioChange">
				<label>
					<radio value="0" color=" #FF7F22" /><text class="txt">公开</text>
				</label>
				<label style="margin-left: 12rpx;">
					<radio value="1" color=" #FF7F22" /><text class="txt">未公开</text>
				</label>
				<label style="margin-left: 125rpx;">{{ remnant}}/90</label>
			</radio-group> -->
			
		</view>
		<view class="footer">
			<view class="btn" @click="whrite">
				{{iswrite ? '写下我的愿望' : '写好了'}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		imgBaseUrl
	} from '../../../../utils/baseUrl'
	import {
		busTreviFountainadd
	} from '../../../../utils/api.js'
	import textares from '../components/textares.vue'
	export default {
		props: ["xyid"],
		components: {
			textares
		},
		data() {
			return {
				bqimg: imgBaseUrl + '/img/missimg/biaoqian.png',
				ywimg: imgBaseUrl + '/img/missimg/yuanwang.png',
				iswrite: true,
				ismodal: false, //控制文本框
				txt: "", //文本域
				isopen: '',
				remnant: 0 //文本域字数
			}
		},
		mounted() {
			console.log(this.$parent.status, 'ssss');
		},
		methods: {
			Black() {
				//跳转到首页
				uni.reLaunch({
					url: "/pages/tabbar/home/home"
				})
			},
			async whrite() {
				if (this.$parent.xyid != '') {
					this.ismodal = true
					this.iswrite = false
				} else {
					uni.showToast({
						title: '请选择许愿类型',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 1000
					})
				}
				if (this.txt != '' && this.isopen != '') {
					const params = {
						wishType: this.xyid,
						content: this.txt,
						isOpen: this.isopen
					}

					const result = await busTreviFountainadd(params)
					if (result.code == 200) {
						this.ismodal = false
						this.iswrite = true
						this.txt = ''
						this.isopen = ''
						this.$emit('redeem')
						uni.showToast({
							title: '许愿成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						if (this.$parent.status == 2) {
							uni.navigateTo({
								url: '../../../subPackagesB/pages/reward/reward'
							})
						}
					}
				}

			},
			//选择公开与不公开
			radioChange(e) {
				console.log(e.detail.value, 'e')
				this.isopen = e.detail.value
			},
			//监听文本域输入得字数
			descInput(event) {
				this.remnant = event.target.value.length;
			},
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + image;
			},
		}
	}
</script>

<style lang="less" scoped>
	.header {
		display: flex;
		justify-content: space-between;
		padding-top: 5vh;

		.right_font {
			width: 54px;
			height: 25px;
			font-size: 18px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

	}

	.centertext {
		position: relative;
		display: flex;
		justify-content: center;

		.textarea {
			// background-color: #FFD698;
			background-image: url('https://ctrlsoft.net.cn/app_static/hesaid//img/missimg/biaoqian.png');
			background-size: 100% 100%;
			opacity: 1;
			padding: 90rpx 61rpx;
			width: 500rpx;
			height: 307rpx;
			position: absolute;
			top: 393rpx;
			z-index: 10000;
			line-height: 50rpx;
			// left: 7%;
		}

		.radio {
			position: absolute;
			top: 828rpx;
			left: 20%;
			z-index: 100000;

			.txt {
				font-size: 13px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #6A3C16;
			}
		}
	}

	.footer {
		position: relative;
		margin: auto;
		z-index: 10000;

		.btn {
			position: absolute;
			top: 80vh;
			left: 25%;
			width: 356rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			background: linear-gradient(180deg, #FFEACC 0%, #FFD698 100%);
			border-radius: 52rpx 52rpx 52rpx 52rpx;
			opacity: 1;
		}
	}
</style>